<template>
	<view @click="showTopRight=false">
		<u-navbar titleStyle="font-size:40rpx;color:#333" :placeholder='true' leftIcon="" height="100" title="" >
			<view class="u-nav-slot" slot="center" >
				<view class="flexJBC" style='padding: 0 30rpx;box-sizing: border-box;'>
					<u-icon name="arrow-left" size="20" style='margin-right: 30rpx;' @click="leftClick"></u-icon>
					<u-input :clearable="true" border="none" placeholder="搜索关键字" prefixIcon="search"
						prefixIconStyle="font-size:60rpx;color: #999" v-model="keywords"
						@confirm="page=1;list=[];pageLoading=true; getList()"
						@clear="keywords='';page=1;list=[];pageLoading=true; getList()"
						customStyle='background-color:#F4F4F4;height: 76rpx;border-radius: 14rpx;padding:0 26rpx'>
					</u-input>
					<view class="" @click.stop="showTopRight=!showTopRight">
						<u-icon name="more-dot-fill" style='margin-left: 20rpx;'></u-icon>
					</view>
					<TopRight :showTopRight='showTopRight' />
				</view>
				<u-tabs :current='active' :list="list1" @click="getList" :activeStyle="{color:'#DD2131', }"
					:itemStyle="{color: '#333', fontSize:'32rpx',lineHeight:'80rpx'}" lineColor="#DD2131"></u-tabs>
			</view>
		</u-navbar>
		<view class="paddingLR32" style="padding:15rpx 32rpx;">
			<!-- <u-sticky> -->
				<!-- <u-tabs :current='active' :list="list1" @click="getList" :activeStyle="{color:'#DD2131', }"
					:itemStyle="{color: '#333', fontSize:'32rpx',lineHeight:'80rpx'}" lineColor="#DD2131"></u-tabs> -->
			<!-- </u-sticky> -->
			<view class="lisbox whiteBox" v-for="(item,index) in list"  :key='index'>
				<view v-for="(itemm,indexx) in item.store" :key='indexx'
					@click="$my.go('/pages/my/order/orderDetail?order_id='+item.order_id+'&sub_order_id='+itemm.sub_order_id)"
					> 
					<view class="flexJBC fontS24">
						<view class="flex">
							<image :src="itemm.store_image" mode="aspectFill" style="width:40rpx;height:40rpx;border-radius: 50%;margin-right: 5rpx;"></image>
							<view class=""> {{itemm.store_name}} </view>
						</view>
						<view class="homeRed"> 
							{{itemm.status_text}}
						</view>
					</view>
					<view class="flexJBC" style="margin:24rpx auto 28rpx;align-items: flex-start;"
						v-for="(itemmm,indexxx) in itemm.goods"  :key='indexxx'>
						<image :src="itemmm.image" style="width:160rpx;height:160rpx;border-radius: 10rpx;"
							mode="aspectFill" />
						<view class="fontS24" style="width: 65%;">
							<view class="flexJBC">
								<view class="elipes1 " style="width:80%;">
									{{itemmm.product_name}}
								</view>
							</view>
							<view style="margin-top: 10rpx;" class="flexJBC co9 fontS24">
								<view >
									规格参数：{{itemmm.detail}}
								</view>
								<view >
									x{{itemmm.product_num}}
								</view>
							</view>
							<view style="margin-top: 10rpx;" class="flexJBC co9 fontS24">
								<view >
									{{itemmm.warehouse_type_text}}
								</view>
								<view >
									￥{{itemmm.total_price}}
								</view>
							</view>
						</view>
					</view>
					<view class="yunxianfei fontS24" v-if="false">
						运费险：卖家赠送
					</view>
				</view>
				<view class="flexJBC fontS24 co9" style="margin: 24rpx 0pt 16rpx;background: #F5F5F5;line-height: 60rpx;padding: 0  64rpx;box-sizing: border-box;">
					<view class="">
						{{item.total_num}}种货品
					</view>
					<view>总价:￥{{(item.real_price-item.real_postage-(item.coupon_price?item.coupon_price:0)).toFixed(2)}}</view>
					<view>优惠￥{{item.coupon_price?item.coupon_price:'0.00'}}</view>
				</view>
				
			<view class="fontS24" style="text-align: right;" >
					<view>{{item.status==5?'预估运费':'运费'}}:￥{{item.real_postage}}</view>
					<view style='margin-top: 24rpx;' v-if='item.status!=5'>
						{{item.status==0?'需付款':'实付款'}}￥{{item.real_price}}
					</view>
				</view>
				<view class="flexJBC" style="margin-top: 20rpx;">
					<view>
						<view class="co9" v-if="item.status==0 || item.status==5" @click.stop="showcale=true;order_id=item.order_id">
							取消订单
						</view>
						<!-- 空了再看看有没有问题 -->
						<view class="co9" v-if="item.status==1 || item.status==2" @click.stop="goRefund(item)">
							申请退款
						</view>
						<view class="co9" v-if="item.status==3 || item.status==4" @click.stop="delOrder(item)">
							删除订单
						</view>
					</view>
					<view>
						<view class="flex" v-if="item.status==0">
							<view class="btnClick1" @click.stop="editAddress">
								修改地址
							</view>
							<view class="btnClick1 borderred homeRed" style="margin-left: 24rpx;"
								@click.stop="goPay(item,itemm)">
								立即付款
							</view>
						</view>
						<view class="flex" v-if="item.status==1">
							<view class="btnClick1">
								催发货
							</view>
							<view class="btnClick1" style="margin-left: 24rpx;" @click.stop="editAddress">
								修改地址
							</view>
						</view>
						<view class="flex" v-if="item.status==2">
							<!-- <view class="btnClick1" @click.stop="logisticsDetail(item)">
													查看物流
												</view> -->
							<view class="btnClick1 borderred homeRed" style="margin-left: 24rpx;"
								@click.stop="delivery(item)">
								确认收货
							</view>
						</view>
						<view class="flex" v-if="item.status==4 || item.status==3">
							<!-- <view class="btnClick1" @click.stop="logisticsDetail(item)">
								查看物流
							</view> -->
							<view class="btnClick1" style="margin-left: 24rpx;" @click.stop="addCart(item)"
								v-if="item.status==4">
								加入购物车
							</view>
							<view class="btnClick1 borderred homeRed" style="margin-left: 24rpx;" v-if="item.status==3"
								@click.stop="goComment(item)">
								待评价
							</view>
						</view>
						<view class="flex" v-if="item.status=='-3' || item.status=='-2'" @click.stop="addCart(item)">
							<view class="btnClick1">
								加入购物车
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 取消订单弹窗-->
		<u-popup :show="showcale" mode="bottom" :round="10" @close="showcale=false">
			<view class="padding32 whitboxModel">
				<view class="center  fontS36">
					请选择取消原因
				</view>
				<view class="flex flexRowCenter mb24">
					<view class="center tips co9 fontS24">
						取消后无法恢复，优惠券，红包可退回，有效期内使用
					</view>
				</view>
				<u-radio-group activeColor='#DD2131' v-model="checkboxValue1" placement="column" iconPlacement="right">
					<u-radio labelSize='16px' shape='square' labelColor='#333' :customStyle="{marginBottom: '8px'}"
						v-for="(item, index) in checkboxList1" :key="index" :label="item.title" :name="item.id" 
						style="margin-bottom: 40rpx;">
					</u-radio>
				</u-radio-group>
				<view class="flex flexRowCenter">
					<view class="btnClick1" style="background-color: #FFC047;color: #fff;border-color: #FFC047;"
						@click="showcale=false">
						暂不取消
					</view>
					<view class="btnClick1 borderred bgcred" style="margin-left: 90rpx;color: #fff;"
						@click="orderCancel">
						确定取消
					</view>
				</view>
			</view>
		</u-popup>
		<u-empty
			v-if="((active==0 && list.length==0) || (active==1 && list.length==0) || (active==2 && list.length==0) ||(active==3 && list.length==0) || (active==4 && list.length==0)) && !pageLoading"
			mode="order" marginTop='20%'></u-empty>
		<view class="padding32" v-if="showTuijianList">
			<List :list='tuijianList' />
		</view>
		<u-loading-page loading-text="loading..." v-if='pageLoading' :loading='true' bgColor='#f5f5f5'></u-loading-page>
	</view>
</template>
<script> 
	import List from '@/componentes/list.vue'
	import TopRight from '@/componentes/topRight.vue'
	export default {
		data() {
			return {
				showTopRight: false,
				keywords: '', //input 输入关键字
				total: 0, //list总条数 
				tuijianPage: 1,
				showTuijianList: false, //是否显示推荐列表
				tuijianList: [], //推荐列表
				order_id: "", //取消订单的id
				checkboxValue1: '', //取消订单原因
				// 基本案列数据
				checkboxList1: [],
				showcale: false, //取消订单
				pageLoading: true,
				list: [],
				page: 1,
				active: 0, //当前的状态
				list1: [{
						name: '全部',
						id: 'All'
					},
					{
						name: '待支付',
						id: 0
					},
					{
						name: '待发货',
						id: 1
					},
					{
						name: '待收货',
						id: 2
					},
					{
						name: '待评价/已评价',
						id: '3,4'
					},
					// {
					// 	name: '退款/售后',
					// 	id: '-3'
					// },
				]
			}
		},
		components: {
			List,
			TopRight
		},
		onReachBottom() {
			if (this.list.length == this.total) {
				this.tuijianPage++;
				this.getTuijian();
			} else {
				this.page++;
				this.getList()
			}
		},
		onShow() {
			this.page = 1;
			this.list = [];
			this.getList();
		},
		onLoad(options) {
			options.type ? this.active = options.type : ''
			this.$my.post('/index/com/getProductReason', {
				type: 0
			}).then(res => {
				if (res.code == 200) {
					this.checkboxList1 = res.data
				}
			});
			this.getTuijian()
		},
		methods: {
			leftClick() {
				this.$my.go()
			},
			// 确认收货
			delivery(item) {
				let _this = this
				uni.showModal({
					title: "",
					content: "确定收货吗？",
					cancelText: '取消', // 取消按钮的文字   
					confirmText: '确认', // 确认按钮的文字
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '确定收货中'
							})
							let sub_order_id = [];
							item.store.forEach(item1 => {
								sub_order_id.push(item1.sub_order_id)
							})
							_this.$my.post('/index/user_order/delivery', {
								order_id: item.order_id,
								sub_order_id,
							}).then(res => {
								uni.hideLoading()
								_this.$my.toast(res.message)
								if (res.code == 200) {
									_this.page = 1;
									_this.list = [];
									_this.getList()
								}
							})
						}
					}
				})
			},
			// 查看物流
			logisticsDetail(item) {
				let sub_order_id = [];
				item.store.forEach(item1 => {
					item1.goods.forEach(item2 => {
						sub_order_id.push(item2.sub_order_id)
					})
				})
				this.$my.post('/index/user_order/details', {
					order_id: item.order_id,
					sub_order_id,
				}).then(res => {
					if (res.code == 200) {
						this.$my.go('/pages/my/order/logisticsDetail?express=' + JSON.stringify(res.data.express
							.data) + '&order=' + JSON.stringify(res.data.order))
					} else {
						this.$my.toase(res.message)
					}
				})
			},
			// 去支付
			goPay(item, itemm) {
				let totalPrice = item.real_price;
				let data = {
					sn: item.sn
				}
				this.$my.go('/myPackageA/goodsAndFacton/pay/pay?data=' + JSON.stringify(data) + '&totalPrice=' +
					totalPrice)
			},
			// 删除订单
			delOrder(item) {
				let _this = this
				uni.showModal({
					title: "",
					content: "确定要删除订单吗？",
					cancelText: '取消', // 取消按钮的文字   
					confirmText: '确认', // 确认按钮的文字   
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中'
							})
							let sub_order_id = [];
							item.store.forEach(item1 => {
								sub_order_id.push(item1.sub_order_id)
							})
							_this.$my.post('/index/user_order/del', {
								order_id: item.order_id,
								sub_order_id,
							}).then(res => {
								uni.hideLoading()
								_this.$my.toast(res.message)
								if (res.code == 200) {
									_this.page = 1;
									_this.list = [];
									_this.getList()
								}
							})
						}
					}
				})
			},
			//取消订单
			orderCancel(item) {
				if (this.checkboxValue1) {
					this.$my.post('/index/user_order/cancel', {
						order_id: this.order_id,
						cancel: this.checkboxValue1
					}).then(res => {
						this.$my.toast(res.message)
						if (res.code == 200) {
							this.page = 1;
							this.list = [];
							this.showcale = false;
							this.getList()

						}
					})
				} else {
					this.$my.toast('请选择取消原因')
				}
			},
			// 去评价
			goComment(item) {
				let sub_order_id = [];
				item.store.forEach(item1 => {
					sub_order_id.push(item1.sub_order_id)
				})
				this.$my.go('/pages/my/more/evaluation/comment?sub_order_id=' + sub_order_id)
			},
			// 修改地址
			editAddress() {
				this.$my.toast('请联系商家')
			},
			// 加入购物车
			addCart(item) {
				console.log(item)
				let id = [];
				let sub_order_id = [];
				item.store.forEach(item1 => {
					sub_order_id.push(item1.sub_order_id)
				})
				this.$my.post('/index/user_order/add_cart', {
					order_id: item.order_id,
					sub_order_id: sub_order_id,
				}).then(res => {
					this.$my.toast(res.message)
				})
			},
			// 申请退款
			goRefund(item) {
				console.log(item)
				// return 
				this.$my.go('/pages/my/order/refund/refund?store=' + JSON.stringify(item.store))
			},
			getList(val) {

				if (val) {
					this.active = val.index
					this.page = 1;
					this.list = [];
					this.pageLoading = true
				}
				if (this.list)
					this.$my.post('/index/user_order/list', {
						status: this.list1[this.active].id,
						page: this.page,
						limit: 10,
						keywords: this.keywords,
					}).then(res => {
						this.pageLoading = false;
						if (res.code == 200) {
							// 回到顶部
							uni.pageScrollTo({ 
								scrollTop: 0, duration: 100 
							});
							this.total = res.data.total
							if (res.data.data.length > 0) {
								this.list = this.list.concat(res.data.data)
							}
							// if (this.total == this.list.length) {
							// 	this.getTuijian(true)
							// }
						}
					})
			},
			getTuijian(val) {
				if (val) {
					this.tuijianList = [];
					this.tuijianPage = 1;
				}
				this.$my.post('/index/product/getProductRecommend', {
					page: this.tuijianPage,
					limit: 10
				}).then(res => {
					if (res.code == 200) {
						this.showTuijianList = true
						if(this.tuijianPage==1){
							this.tuijianList=res.data.data
						}else{
							this.tuijianList = this.tuijianList.concat(res.data.data)
						}
						
					}
				})
			},
			titleClick(e) {
				console.log(e)
				this.active = e.index;
				this.page = 1;
				this.tuijianPage = 1;
				this.list = [];
				this.tuijianList = [];
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-nav-slot {
		width: 100%;
	}

	/deep/.u-navbar__content__right {
		left: 10%;
	}

	/deep/ .u-sticky__content {
		background-color: #f5f5f5 !important;
	}

	// .lisbox:nth-of-type(1){
	// 	margin-top: 36rpx;
	// }

	.yunxianfei {
		width: 100%;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 24rpx;
		background-color: #f5f5f5;
		padding: 0 16rpx;
		box-sizing: border-box;
	}

	.lisbox {
		margin-top: 20rpx;
		// margin-bottom: 24rpx;

	}

	.toplis {
		margin: 32rpx 0;
		margin-right: 80rpx;
	}
</style>
